<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Sparklines</h1>
        <section class="markdown">
            <p>这个jQuery插件 直接在浏览器中使用在HTML中内联提供的数据或通过javascript 生成 迷你图（小内联图）。</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>
<p>
Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
</p>
<p>
Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>
</p>

<script type="text/javascript" src="dist/lib/jquery/jquery-sparkline/jquery.sparkline.js"></script>
<script type="text/javascript">
$(function() {
    $('.inlinesparkline').sparkline();
    var myvalues = [10,8,5,7,4,4,1];
    $('.dynamicsparkline').sparkline(myvalues);
    $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
    $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
});
</script>

                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;p&gt;
Inline Sparkline: &lt;span class=&quot;inlinesparkline&quot;&gt;1,4,4,7,5,9,10&lt;/span&gt;.
&lt;/p&gt;
&lt;p&gt;
Sparkline with dynamic data: &lt;span class=&quot;dynamicsparkline&quot;&gt;Loading..&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
Bar chart with dynamic data: &lt;span class=&quot;dynamicbar&quot;&gt;Loading..&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
Bar chart with inline data: &lt;span class=&quot;inlinebar&quot;&gt;1,3,4,5,3,5&lt;/span&gt;
&lt;/p&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;dist/lib/jquery/jquery-sparkline/jquery.sparkline.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function() {
    $(&#x27;.inlinesparkline&#x27;).sparkline();
    var myvalues = [10,8,5,7,4,4,1];
    $(&#x27;.dynamicsparkline&#x27;).sparkline(myvalues);
    $(&#x27;.dynamicbar&#x27;).sparkline(myvalues, {type: &#x27;bar&#x27;, barColor: &#x27;green&#x27;} );
    $(&#x27;.inlinebar&#x27;).sparkline(&#x27;html&#x27;, {type: &#x27;bar&#x27;, barColor: &#x27;red&#x27;} );
});
&lt;/script&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>

<div class="row" id="sparkline_f">
    <div class="col-md-4">
        <div class="box box-solid">
            <div class="box-header">
                <h3 class="box-title text-danger">Sparkline Pie</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="box-body text-center">
                <div class="sparkline" data-type="pie" data-offset="90" data-width="100px" data-height="100px">
                    6,4,8
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="box box-solid">
            <div class="box-header">
                <h3 class="box-title text-blue">Sparkline line</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="box-body text-center">
                <div class="sparkline" data-type="line" data-spot-Radius="3" data-highlight-Spot-Color="#f39c12" data-highlight-Line-Color="#222" data-min-Spot-Color="#f56954" data-max-Spot-Color="#00a65a" data-spot-Color="#39CCCC" data-offset="90" data-width="100%" data-height="100px" data-line-Width="2" data-line-Color="#39CCCC" data-fill-Color="rgba(57, 204, 204, 0.08)">
                    6,4,7,8,4,3,2,2,5,6,7,4,1,5,7,9,9,8,7,6
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="box box-solid">
            <div class="box-header">
                <h3 class="box-title text-warning">Sparkline Bar</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="box-body text-center">
                <div class="sparkline" data-type="bar" data-width="97%" data-height="100px" data-bar-Width="14" data-bar-Spacing="7" data-bar-Color="#f39c12">
                    6,4,8, 9, 10, 5, 13, 18, 21, 7, 9
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  $("#sparkline_f .sparkline").each(function () {
      var $this = $(this);
      $this.sparkline('html', $this.data());
    });
</script>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">不同样式</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;row&quot; id=&quot;sparkline_f&quot;&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title text-danger&quot;&gt;Sparkline Pie&lt;/h3&gt;
                &lt;div class=&quot;box-tools pull-right&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-sm&quot;&gt;&lt;i class=&quot;fa fa-refresh&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;box-body text-center&quot;&gt;
                &lt;div class=&quot;sparkline&quot; data-type=&quot;pie&quot; data-offset=&quot;90&quot; data-width=&quot;100px&quot; data-height=&quot;100px&quot;&gt;
                    6,4,8
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title text-blue&quot;&gt;Sparkline line&lt;/h3&gt;
                &lt;div class=&quot;box-tools pull-right&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-sm&quot;&gt;&lt;i class=&quot;fa fa-refresh&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;box-body text-center&quot;&gt;
                &lt;div class=&quot;sparkline&quot; data-type=&quot;line&quot; data-spot-Radius=&quot;3&quot; data-highlight-Spot-Color=&quot;#f39c12&quot; data-highlight-Line-Color=&quot;#222&quot; data-min-Spot-Color=&quot;#f56954&quot; data-max-Spot-Color=&quot;#00a65a&quot; data-spot-Color=&quot;#39CCCC&quot; data-offset=&quot;90&quot; data-width=&quot;100%&quot; data-height=&quot;100px&quot; data-line-Width=&quot;2&quot; data-line-Color=&quot;#39CCCC&quot; data-fill-Color=&quot;rgba(57, 204, 204, 0.08)&quot;&gt;
                    6,4,7,8,4,3,2,2,5,6,7,4,1,5,7,9,9,8,7,6
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title text-warning&quot;&gt;Sparkline Bar&lt;/h3&gt;
                &lt;div class=&quot;box-tools pull-right&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-sm&quot;&gt;&lt;i class=&quot;fa fa-refresh&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;box-body text-center&quot;&gt;
                &lt;div class=&quot;sparkline&quot; data-type=&quot;bar&quot; data-width=&quot;97%&quot; data-height=&quot;100px&quot; data-bar-Width=&quot;14&quot; data-bar-Spacing=&quot;7&quot; data-bar-Color=&quot;#f39c12&quot;&gt;
                    6,4,8, 9, 10, 5, 13, 18, 21, 7, 9
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  $(&quot;#sparkline_f .sparkline&quot;).each(function () {
      var $this = $(this);
      $this.sparkline(&#x27;html&#x27;, $this.data());
    });
&lt;/script&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>

    </div>
    <section class="markdown api-container">
        <h2 id="API"><span><!-- react-text: 341 -->API<!-- /react-text --></span><a href="#API" class="anchor">#</a></h2>
        <h3 id="Button"><span><!-- react-text: 345 -->Sparklines<!-- /react-text --></span><a href="#Button" class="anchor">#</a></h3>
        <table>
            <thead>
                <tr>
                    <th>
                        <!-- react-text: 351 -->属性
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 353 -->说明
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 355 -->类型
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 357 -->默认值
                        <!-- /react-text -->
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <!-- react-text: 361 -->type
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 363 -->line (default), bar, tristate, discrete, bullet, pie or box;
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 365 -->String
                        <!-- /react-text -->
                    </td>
                    <td>
                      line (default)
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 369 -->width
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 371 -->图表的宽度- '默认为'auto -可以是任何有效的CSS宽度- 1.5em，20像素等，对bar与tristate无效
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 373 -->string
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 375 -->auto
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 378 -->height
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 380 -->图表的高度的-默认为'auto'
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 382 -->string
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 384 -->auto
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 387 -->lineColor
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 389 -->lineColor
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 391 -->string
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 393 -->
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 396 -->fillColor
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 398 -->填充颜色，设置为false，以禁用填充。
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 400 -->string
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 402 -->
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 405 -->chartRangeMin
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 407 -->指定要使用的最小值范围的Y值的图表——默认提供的最小值
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 409 -->string
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 411 -->
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 414 -->chartRangeMax
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 416 -->指定要使用的最大值的Y值的范围图,默认提供的最大价值
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 418 -->string
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 420 -->
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 423 -->composite
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 425 -->是否使用组合,如果为true,则不重绘图形
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 427 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 429 -->
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 432 -->enableTagOptions
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 434 -->如果为true选项可以被指定为属性，每个标签上sparkline将进行改造，以及传递给sparkline（）函数。 另见tagOptionPrefix
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 436 -->
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 438 -->
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 432 -->tagOptionPrefix
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 434 -->每个选项的字符串作为一个属性传递给一个标记。默认为“spark”
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 436 -->
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 438 -->
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 432 -->tagValuesAttribute
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 434 -->根据属性名称的标签获取“value”
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 436 -->
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 438 -->
                        <!-- /react-text -->
                    </td>
                </tr>
            </tbody>
        </table>
        <style>
        #src-components-Button-demo-btn-group .atui-btn-group {
            margin-bottom: 10px;
        }
        </style>
    </section>
</article>